import type { FC } from 'react';
import style from './index.less';
import React, { Fragment, useState, useEffect } from 'react';
import { Popover, Avatar, Tag, Input, Button } from 'antd';
import { GithubOutlined } from '@ant-design/icons';
import Count from '../Count';
import { Link, useHistory } from 'umi';
import { getCurrentUser, saveComConversation, getComConversation } from './service';
import { values } from 'lodash';

interface Props {}
const Python: FC<Props> = props => {
  const [acticles, setArticles] = useState([]);
  const history = useHistory();
  const [avator, setAvator] = useState();
  const { tabkey } = props;
  const [talkbox, settalkbox] = useState([]);
  const username = localStorage.getItem('username');
  const user_id = localStorage.getItem('user_id');
  const getUser = () => {
    getCurrentUser({ user_id }).then(res => {
      console.log(res.data.user_img);
      setAvator(res.data.user_img);
    });
  };

  const fetchConv = async () => {
    const { data } = await getComConversation({ community_id: tabkey });
    settalkbox(data);
  };
  useEffect(() => {
    getUser();
    fetchConv();
  }, [props]);

  const showTalk = async () => {
    console.log('我点拉');
    const { res } = await saveComConversation({
      user_id,
      username,
      avator,
      community_id: tabkey,
      content: data,
    });
    res.code === 1000 ? setdata('') : '';
    getUser();
    fetchConv();
    setdata('');
  };
  function inputChange(val: React.ChangeEvent<HTMLInputElement>) {
    setdata(val.target.value);
  }
  const [data, setdata] = useState('');

  return (
    <div className={style.talk}>
      <div className={style.content}>
        {talkbox.map((item, index) => (
          <div className={style.box}>
            <div>
              <img className={style.img} src={item.avator} />
            </div>
            <div className={style.title}>{item.content}</div>
          </div>
        ))}
      </div>
      <div className={style.talkin}>
        <Input.Group compact style={{ marginTop: '2%' }}>
          <Input
            style={{ width: '75%', height: '40px', paddingBottom: 20, fontSize: 20 }}
            onChange={e => inputChange(e)}
            value={data}
          />
          <Button
            style={{
              width: '25%',
              height: '40px',
              paddingBottom: 20,
              background: 'rgb(213,167,228)',
              fontSize: 20,
              fontWeight: 'bold',
              border: 'none',
            }}
            type="primary"
            onClick={showTalk}
          >
            参与讨论
          </Button>
        </Input.Group>
      </div>
    </div>
  );
};

export default Python;
